/**
 * 基于layui样式的城市选择控件
 *
 * 依赖:
 * 1. layui React Form、Select组件
 * 2. AreaData_min.js中的城市数据
 */

class LayuiCitySelect extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            city:[],
            section:[]
        }
    }

    provinceChange(data){
        this.setState({city:sub_array[data]});
    }

    cityChange(data){
        this.setState({section:sub_arr[data]});
    }

    get value(){
        if(this.refs.section.value)
            return this.refs.section.value;
        else
            return this.refs.city.value;
    }

    set value(value){
        if(value.length >= 2) {
            this.refs.province.value = value.substr(0, 2);
            this.setState({city:sub_array[this.refs.province.value]},()=>{
                if(value.length >= 4) {
                    this.refs.city.value = value.substr(0, 4);
                    this.setState({section:sub_arr[this.refs.city.value]},()=>{
                        if(value.length >= 6)
                            this.refs.section.value = value.substr(0,6);
                    });
                }
            });
        }
    }

    get name(){
        let province = this.refs.province.text;
        let city = this.refs.city.text;
        let section = this.refs.section.text;

        let name = province+"-"+city;
        if( this.refs.section.value)
            name += "-"+section;
        return name;
    }

    render(){
        let {onChange,ref,...other} = this.props;
        return [
            <Select onChange={(data)=>this.provinceChange(data)} ref="province" {...other}>
                <option value="">请选择省份</option>
                {
                    area_array.map((province,index)=>{
                        return <option value={index}>{province}</option>
                    })
                }
            </Select>,
            <Select onChange={(data)=>this.cityChange(data)} ref="city" {...other}>
                <option value="">请选择城市</option>
                {
                    this.state.city.map((city,index)=>{
                        return <option value={index}>{city}</option>
                    })
                }
            </Select>,
            <Select ref="section">
                <option value="">请选择区域</option>
                {
                    this.state.section?this.state.section.map((section,index)=>{
                        return <option value={index}>{section}</option>
                    }):''
                }
            </Select>
        ]
    }
}
